<template>
  <a-drawer
    placement="right"
    :width="width"
    :closable="false"
    :visible="visible"
    :get-container="false"
    :wrap-style="{ position: 'absolute' }"
    @close="close"
  >

    <a-card size="small" title="核销信息" style="width: 100%">
      <a-form-model
        ref="ruleForm"
        :model="record"
        :rules="rules">
        <a-row>
          <a-col :span="8">
            <a-form-model-item label="核销单据号" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.writeoffSerial" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="结算单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.settlementCompany" disabled></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="核销日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="writeoffDate">
              <a-date-picker
                style="width: 240px"
                format="YYYY-MM-DD"
                v-model="record.writeoffDate"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="核销人" :labelCol="labelCol" :wrapperCol="wrapperCol">

              <a-input v-model="record.createBy" disabled></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item label="收付方向" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.payType == '1'?'应收':'应付'" disabled></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="8">
            <a-form-model-item :label="record.payType == '1'?'收款金额(CNY)':'付款金额(CNY)'" :labelCol="labelCol"
                               :wrapperCol="wrapperCol">
              <a-input-number style="width: 100%" v-model="record.writeoffAmount"
                              :max="parseFloat(record.writeoffAmount)"
                              :precision="2"
                              @change="changeanount" disabled></a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item :label="record.payType == '1'?'收款币种':'付款币种'" :labelCol="labelCol"
                               :wrapperCol="wrapperCol" prop="writeoffCurrency">
              <j-dict-select-tag type="list" v-model="record.writeoffCurrency" dictCode="currency" placeholder="请选择核销币种"
              />
            </a-form-model-item>
          </a-col>


          <a-col :span="8">
            <a-form-model-item label="核销汇率" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="writeoffRate">
              <a-input-number style="width: 100%" v-model="record.writeoffRate"
                              :precision="2"
                              @change="changeanount"></a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="实销金额" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="actualAmount">
              <a-input-number style="width: 100%" v-model="record.actualAmount" :max="parseFloat(record.writeoffAmount)"
                              :precision="2"
                              @change="changeanount"></a-input-number>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item :label="record.payType == '1'?'收款日期':'付款日期'" :labelCol="labelCol"
                               :wrapperCol="wrapperCol" prop="typeDate">
              <a-date-picker
                style="width: 100%"
                format="YYYY-MM-DD"
                v-model="record.typeDate"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="结算方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="settlementType">
              <j-dict-select-tag type="list" v-model="record.settlementType" dictCode="hx_pay_type"
                                 placeholder="请选择结算方式"
              />
            </a-form-model-item>
          </a-col>
          <!--          -->
          <a-col :span="8">
            <a-form-model-item label="支票号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="createTime">
              <a-input v-model="record.checkNumber" :disabled="record.settlementType != '支票'"></a-input>
            </a-form-model-item>
          </a-col>


          <a-col :span="8">
            <a-form-model-item label="核销备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.remark" type="textarea" :rows="4" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="对方账户信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-model="record.invoiceContent" type="textarea" :rows="4" :placeholder="kpxxPlaceHolder" />
            </a-form-model-item>
          </a-col>


        </a-row>
      </a-form-model>
      <a-divider dashed />
      <a-row>
        <a-col :span="5">
          <h3>核销方式：<span style="color: red">{{ status }}</span></h3>
        </a-col>
        <a-col :span="8">
          <h3>实际核销金额(CNY)：<span style="color: red">{{ sjAmount }}</span></h3>
        </a-col>
        <a-col :span="8">
          <h3>未核销金额(CNY)：<span style="color: red">{{ weiAmount }}</span></h3>
        </a-col>
      </a-row>
      <a-divider dashed />
      <a-timeline>
        <a-timeline-item v-for="(item,index) in recordlist">
          <p> {{ item.writeoffDate }}</p>
          {{ item.content }}
        </a-timeline-item>
      </a-timeline>
    </a-card>

    <a-spin :spinning="confirmLoading">
      <a-card size="small" title="单据信息" style="width: 100%">
        <j-vxe-table
          ref="receivableTable"
          resizable
          keep-source
          :loading="confirmLoading"
          :height="350"
          :dataSource="bottomList"
          :columns="bottomCol"
          bordered
        >
        </j-vxe-table>
      </a-card>
    </a-spin>

    <div style="margin-top: 50px"></div>
    <div
      :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'left',
          zIndex: 999,
        }"
    >

      <a-button @click="scClick(1)" type="primary" v-if="!isedit" icon="arrow-up">
        进行核销
      </a-button>

      <a-button :style="{ marginLeft: '8px' }" @click="close" icon="close">
        取消
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
import { getAction } from '@/api/manage'
import JFormContainer from '@/components/jeecg/JFormContainer'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { postAction } from '../../api/manage'
import store from '@/store'
import moment from 'moment'

export default {

  name: 'HxCreate',
  components: {
    JFormContainer,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  props: {},
  data() {
    return {
      labelCol1: { span: 4 },
      wrapperCol1: { span: 14 },
      queryDate: {
        settlementCompany: '',
        payType: 1,
        billNumber: ''

      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      companyData: [],
      width: '95%',

      visible: true,
      selectedRowKeys: [],
      bottomList: [],
      confirmLoading: false,
      status: '--',
      record: {
        payType: '1',
        settlementCompany: '',
        writeoffRate: 1,
        writeoffAmount: 0,
        actualAmount: 0,
        writeoffCurrency: 'CNY'
      },
      bottomCol: [
        {
          title: '单据状态',
          key: 'status',
          type: JVXETypes.normal,
          width: '100px',
          defaultValue: '录入状态'
        },
        {
          title: '单据单号',
          key: 'serial',
          type: JVXETypes.normal,
          width: '150px',
          align: 'center'
        },
        {
          title: '结算单位',
          key: 'settlementCompany',
          type: JVXETypes.normal,
          slotName: 'jsdw',
          width: '260px'
        },
        {
          title: '币种',
          key: 'currency',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '汇率',
          key: 'rate',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '金额',
          key: 'amount',
          type: JVXETypes.normal,
          width: '180px',
          statistics: ['sum']
        },
        {
          title: '本位币金额',
          key: 'cnyAmount',
          type: JVXETypes.normal,
          width: '180px',
          statistics: ['sum']
        },
        {
          title: '申请人',
          key: 'createBy',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '申请日期',
          key: 'createTime',
          type: JVXETypes.normal,
          width: '180px'

        },
        {
          title: '审核人',
          key: 'checkUser',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '审核日期',
          key: 'invoiceNumber',
          type: JVXETypes.normal,
          width: '200px'
        },
        {
          title: '备注',
          key: 'remark',
          type: JVXETypes.normal,
          width: '200px'
        }
      ],
      sjAmount: 0,
      weiAmount: 0,
      rules: {
        writeoffDate: [{ required: true, message: '请选择核销日期', trigger: 'change' }],
        actualAmount: [{ required: true, message: '请填写金额', trigger: 'change' }],
        writeoffAmount: [{ required: true, message: '请填写金额', trigger: 'change' }],
        writeoffRate: [{ required: true, message: '请填写核销汇率', trigger: 'change' }],
        typeDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
        settlementType: [{ required: true, message: '请选择结算类型', trigger: 'change' }],
        writeoffCurrency: [{ required: true, message: '请选择币种', trigger: 'change' }]
      },
      url: {
        save: '/box.ship/shipInfo/cost/add',
        queryById: '/box.ship/shipInfo/cost/queryByShipId',
        deleteurl: '/box.ship/shipInfo/cost/del',
        scurl: '/invoice/apply',
        saveurl: '/writeoff/continue',
        editurl: '/invoice/edit',
        selecturl: '/invoice/query/costinfo'
      },
      isedit: false,
      // 选择的行
      selectedRows: [],
      recordlist: [],
      tempPayType: 1,
      kpxxPlaceHolder: '名称：\n' +
        '地址：\n' +
        '银行名称：\n' +
        '银行地址：\n' +
        '银行账号：\n' +
        'SWIFT CODE：\n' +
        'IBAN：\n' +
        'BSB：\n' +
        'ABA：\n' +
        'SORT CODE：\n' +
        'BLZ：'
    }
  },
  computed: {},
  created() {

  },
  beforeCreate() {
    // this.form = this.$form.createForm(this, { name: 'dynamic_form_item' });
    // this.form.getFieldDecorator('boxType', { initialValue: [], preserve: true });

    // this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
  },
  methods: {
    requestRecord(val) {
      this.record = val
      //计算核销方式和金额
      this.calcAmount()
      //查询下面列表数据
      this.searchQuery()
    },

    searchQuery() {
      this.confirmLoading = true
      getAction('/writeoff/query/bill/list', this.queryDate).then(res => {
        if (res.success) {
          this.bottomList = res.result
          this.record.payType = this.tempPayType
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.confirmLoading = false
      })
    },

    scClick(val) {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          let leturl = ''
          console.log('isedit', this.isedit)
          if (this.isedit) {
            leturl = this.url.editurl
          } else {
            leturl = this.url.saveurl
          }
          postAction(leturl, this.record).then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.close()

            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.confirmLoading = false
          })

        } else {

          return false
        }
      })

    },
    changeanount() {
      this.sjAmount = parseFloat(this.record.writeoffRate * this.record.actualAmount).toFixed(2)
      this.weiAmount = this.record.writeoffAmount - this.sjAmount
      if (this.weiAmount != 0) {
        this.status = '部分核销'
      } else {
        this.status = '全部核销'
      }
    },
    /**
     * 计算剩余未核销金额
     */
    calcAmount() {
      this.record.writeoffAmount = parseFloat(this.record.writeoffAmount - (this.record.writeoffRate * this.record.actualAmount)).toFixed(2)
      this.record.actualAmount = this.record.writeoffAmount
      this.sjAmount = this.record.writeoffAmount
      //查询历史核销记录
      getAction('/writeoff/record/' + this.record.id).then(res => {
        if (res.success) {
          this.recordlist = res.result
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
      })
    },
    close() {
      this.$emit('close')
      // this.visible = false
    }
  }
}

</script>
<style scoped>
.box {
  position: relative;
  border: 1px solid #e8e8e8;
}

.box::before {
  content: attr(title);
  position: absolute;
  left: 5%;
  transform: translateX(-50%);
  -webkit-transform: translate(-50%, -50%);
  padding: 0 10px;
  background-color: #fff;
}

/deep/ .ant-card-body {
  padding: 10px;
  zoom: 1;
}

/deep/ .ant-form-item {
  margin-bottom: 0px;
}
</style>
<style>
#components-layout-demo-basic .ant-layout-sider {
  background: #ffffff;
  color: black;
}

#components-layout-demo-basic .ant-layout-content {
  color: #fff;
}
</style>